<!--资讯中心tab页面-->
<template>
  <div class="center">
    <ul class="conslulete">
      <li class="area">
        <div class="zxggCon">
          <h3 class="inTits"><span></span>书法快讯</h3>
          <ul class="timerlist">
            <li v-for="item in newsList " class="item hand-cursor" @click="gotoNew(item.id)" >
              <span class="title">  {{ item.title }}</span>
              <span class="date fr">{{ parseTime(item.createDate, '{y}-{m}-{d}') }}</span>
            </li>
          </ul>
        </div>
      </li>
      <li class="area">
        <div class="zxggCon">
          <h3 class="inTits"><span></span>政策公告</h3>
          <ul class="timerlist">
            <li v-for="item in policysList "  class="item hand-cursor" @click="gotoPolicy(item.id)">
              <span class="title">  {{ item.title }}</span>
              <span class="date fr">{{ parseTime(item.createDate, '{y}-{m}-{d}') }}</span>
            </li>
          </ul>
        </div>
      </li>
      <li class="area">
        <div class="zxggCon">
          <h3 class="inTits"><span></span>校园动态</h3>
          <ul class="timerlist">
            <li v-for="item in campusList "  class="item hand-cursor" @click="gotoSpecialSchool(item.id)">
              <span class="title">  {{ item.title }}</span>
              <span class="date fr">{{ parseTime(item.createDate, '{y}-{m}-{d}') }}</span>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { listNews } from '@/api/consulte/news'
import { listPolicy } from '@/api/consulte/policy'
import { listCampus } from '@/api/consulte/campus'

export default {
  name: 'ConsuleteCenter',
  components: {},
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      newsList: [],
      policysList: [],
      campusList: []
    }
  },
  created() {
    this.getNewList()
    this.getPolicyList()
    this.getCampusList()
  },
  methods: {
    getNewList() {
      listNews(this.queryParams).then(response => {
        this.newsList = response.rows
        this.total = response.total
      })
    },
    getPolicyList() {
      listPolicy(this.queryParams).then(response => {
        this.policysList = response.rows
        this.total = response.total
      })
    },
    getCampusList() {
      listCampus(this.queryParams).then(response => {
        this.campusList = response.rows
        this.total = response.total
      })
    },
    gotoNew(id) {
      const routeData = this.$router.resolve({
        path: '/newsDetail',
        query: { id: id } // 保持原有的 query 传参
      });
      window.open(routeData.href, '_blank');
    },
    gotoPolicy(id) {
      const routeData = this.$router.resolve({
        path: '/policyDetail',
        query: { id: id } // 保持原有的 query 传参
      });
      window.open(routeData.href, '_blank');
    },
    gotoSpecialSchool(id) {
      const routeData = this.$router.resolve({
        path: '/campusDetail',
        query: { id: id } // 保持原有的 query 传参
      });
      window.open(routeData.href, '_blank');
    }
  }
}
</script>

<style lang="scss" scoped>
.center {
  width: 1600px;
  margin: auto;

  .conslulete {
    display: flex;
    justify-content: space-around;

    .area {
      width: 30%;
    }


    .inTits {
      width: 100%;
      height: 30px;
      line-height: 30px;

      span {
        background: url('@/assets/quick/name_ico_yellow.png') no-repeat;
        display: inline-block;
        width: 30px;
        height: 30px;
        float: left;
        margin-right: 5px;
      }
    }

    .timerlist {
      margin-top: 12px;

      .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
        /* 防止内部元素换行导致布局错乱 */
        white-space: nowrap;


      }

      .title {
        /* 关键样式：实现溢出省略 */
        overflow: hidden;
        text-overflow: ellipsis;
        color: #636363;
        /* 让标题占据剩余空间 */
        flex: 1;
        margin-right: 16px; /* 与日期保持距离 */
        /* 可根据需要调整最大宽度 */
        max-width: 80%;
      }
      .date {
        color: #666;
        font-size: 14px;
        /* 固定日期宽度，防止因日期长度变化导致布局抖动 */
        min-width: 80px;
        text-align: right;
      }

      /* 清除浮动相关样式（如果需要兼容旧布局） */
      .fr {
        float: right;
      }
      /* 最后一项去除底部边框 */
      .item:last-child {
        border-bottom: none;
      }
    }
  }
}

.hand-cursor {
  cursor: pointer; /* 核心属性 */
  /* 其他样式（可选） */
  color: #42b983;
  padding: 8px;
}
</style>
